<!DOCTYPE html>
<!--
/*******************************************************************************
#      ____               __          __  _      _____ _       _               #
#     / __ \              \ \        / / | |    / ____| |     | |              #
#    | |  | |_ __   ___ _ __ \  /\  / /__| |__ | |  __| | ___ | |__   ___      #
#    | |  | | '_ \ / _ \ '_ \ \/  \/ / _ \ '_ \| | |_ | |/ _ \| '_ \ / _ \     #
#    | |__| | |_) |  __/ | | \  /\  /  __/ |_) | |__| | | (_) | |_) |  __/     #
#     \____/| .__/ \___|_| |_|\/  \/ \___|_.__/ \_____|_|\___/|_.__/ \___|     #
#           | |                                                                #
#           |_|                 _____ _____  _  __                             #
#                              / ____|  __ \| |/ /                             #
#                             | (___ | |  | | ' /                              #
#                              \___ \| |  | |  <                               #
#                              ____) | |__| | . \                              #
#                             |_____/|_____/|_|\_\                             #
#                                                                              #
#                              (c) 2010-2011 by                                #
#           University of Applied Sciences Northwestern Switzerland            #
#                     Institute of Geomatics Engineering                       #
#                           martin.christen@fhnw.ch                            #
********************************************************************************
*     Licensed under MIT License. Read the file LICENSE for more information   *
*******************************************************************************/

                     TUTORIAL: Using 3D-Geometry related functions
                      
*******************************************************************************/
-->
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../../../external/closure-library/closure/goog/base.js"></script>
<script type="text/javascript" src="../../../compiled/deps.js"></script>
<script type="text/javascript">goog.require('owg.OpenWebGlobe');</script>

<script type="text/javascript">

var geometry = null;
var geometrylayer = null;

//------------------------------------------------------------------------------
// Render-Event: called every frame:
function OnRender(context)
{  
   ogSetTextColor(context, 0,1,0);
   ogDrawText(context,"1: Create Layer with 2 Cubes Async JSON Load",0,260);
   ogDrawText(context,"2: Create another Cube with hardcoded Cube definition",0,230);
   ogDrawText(context,"3: Remove Geometry Layer",0,200);
   ogDrawText(context,"4: Hide Geometry Layer",0,170);
   ogDrawText(context,"5: Show Geometry Layer",0,140);
   ogDrawText(context,"6: Destroy Single Geometry",0,110);
   ogDrawText(context,"7: Change Geometry Position",0,80);
   ogDrawText(context,"8: Hide Single Geometry",0,50);
   ogDrawText(context,"9: Show Geometry Position",0,20);
}
//------------------------------------------------------------------------------
// Mouse-Down-Event: Called when a mouse button is pressed
function OnMouseDown(context, button, mx, my)
{

   // retrieve the scene attached to context:
   var scene = ogGetScene(context);
   
   if(button == 0)
   {
      var mesh_id = ogPickMesh(scene,mx,my);
      if(mesh_id != -1)
      {
         ogHideMesh(mesh_id);  //hide the clicked mesh
      }
   }
   
   if(button > 0)
   {
      for(var i = 0; i<ogGetNumMeshes(geometry);i++) //iterate over all meshes in this geometry
      {
         var mesh_id = ogGetMeshAt(geometry,i);
         ogShowMesh(mesh_id); //show all meshes.
      }   
   }
}


//------------------------------------------------------------------------------
function OnKeyDown(ctx,key)
{
   if(key == 49) // 1 - Create a geometry Layer and load a model
   {         
      var scene = ogGetScene(ctx);
      var world = ogGetWorld(scene);   
      geometrylayer = ogCreateGeometryLayer(world,"buildings");
      geometry = ogLoadGeometryAsync(geometrylayer,"cube.json");
   }
   if(key == 50) // 2 - Create a second model out of a json object and add it to the layer
   {
      var cube =[[
                  {   
                     "id"  :  "1",
                     "Center"  :  [7.66, 46.13, 10000],
                     "DiffuseMap"  :  "texture.png",
                     "VertexSemantic"  :  "pt",
                     "Vertices"  :  [	-100,-100,100,0.00000,1.00000,
                                    -100,100,100,0.00000,0.00000,
                                    100,-100,100,1.00000,1.00000,
                                    100,100,100,1.00000,0.00000,
                                    100,-100,100,0.00000,1.00000,
                                    100,100,100,0.00000,0.00000,
                                    100,-100,-100,1.00000,1.00000,
                                    100,100,-100,1.00000,0.00000,
                                    100,-100,-100,0.00000,1.00000,
                                    100,100,-100,0.00000,0.00000,
                                    -100,-100,-100,1.00000,1.00000,
                                    -100,100,-100,1.00000,0.00000,
                                    -100,-100,-100,0.00000,1.00000,
                                    -100,100,-100,0.00000,0.00000,
                                    -100,-100,100,1.00000,1.00000,
                                    -100,100,100,1.00000,0.00000,
                                    -100,100,100,0.00000,1.00000,
                                    -100,100,-100,0.00000,0.00000,
                                    100,100,100,1.00000,1.00000,
                                    100,100,-100,1.00000,0.00000,
                                    -100,-100,-100,0.00000,1.00000,
                                    -100,-100,100,0.00000,0.00000,
                                    100,-100,-100,1.00000,1.00000,
                                    100,-100,100,1.00000,0.00000],
                     "IndexSemantic"  :  "TRIANGLES",
                     "Indices"  :  [	3,1,0,
                                 2,3,0,
                                 7,5,4,
                                 6,7,4,
                                 11,9,8,
                                 10,11,8,
                                 15,13,12,
                                 14,15,12,
                                 19,17,16,
                                 18,19,16,
                                 23,21,20,
                                 22,23,20]
                     
                  }
      ],[
                  {   
                     "id"  :  "1",
                     "Center"  :  [7.66, 46.13, 10000],
                     "DiffuseMap"  :  "texture.png",
                     "VertexSemantic"  :  "pc",
                     "Vertices"  :  [	-100,-100,100,1,0,0,1,
                                    -100,100,100,1,0,0,1,
                                    100,-100,100,1,0,0,1,
                                    100,100,100,1,0,0,1,
                                    100,-100,100,1,0,0,1,
                                    100,100,100,1,0,0,1,
                                    100,-100,-100,1,0,0,1,
                                    100,100,-100,1,0,0,1],
                     "IndexSemantic"  :  "LINES",
                     "Indices"  :  [	3,1,0,
                                       2,3,0,
                                       7,5,4,
                                       6,7,4]
                     
                  }
      ]];
    
      geometry = ogCreateGeometry(geometrylayer, cube);
   }
   if(key == 51) // 3 - Destroy a geometrylayer
   {
      ogRemoveGeometryLayer(geometrylayer);
   }
   if(key == 52) // 4 - Hide a Geometry Layer
   {
      ogHideGeometryLayer(geometrylayer);
   }
   if(key == 53) // 5 - Show a Geometry Layer
   {
      ogShowGeometryLayer(geometrylayer);
   }
   if(key == 54) // 6 - Destory a single geomerty.
   {
      ogDestroyGeometry(geometry);
   }
   if(key == 55) // 7 - Change Geometry Position
   {
      ogSetGeometryPositionWGS84(geometry,7.66, 46.13, 15000)
   }
   if(key == 56) // 8 - Hide Geometry
   {
      ogHideGeometry(geometry);
   }
   if(key == 57) // 9 - Show Geometry
   {
      ogShowGeometry(geometry);
   }
   if(key == 38) // up - Turn Geometry
   {
      yaw = yaw+1;
      ogSetGeometryPositionWGS84(geometry,7.66, 46.13, 10000,yaw,pitch,roll);
   }
   if(key == 39) // down - Turn Geometry
   {
      pitch = pitch+1;
      ogSetGeometryPositionWGS84(geometry,7.66, 46.13, 10000,yaw,pitch,roll);
   }
   if(key == 40) // rigth - Turn Geometry
   {
      roll=roll+1;
      ogSetGeometryPositionWGS84(geometry,7.66, 46.13, 10000,yaw,pitch,roll);
   }
   
}
var yaw = 0;
var pitch = 0;
var roll = 0;

//------------------------------------------------------------------------------
function main()
{
   // (0) Set location of Artwork directory. Because of CORS this can't be local
   // if you want to open this using file://...
   ogSetArtworkDirectory("http://www.openwebglobe.org/art/");
   
   // (1) create an OpenWebGlobe context using canvas
   // first parameter is canvas-id and second is "fullscreen"
   var ctx = ogCreateContextFromCanvas("canvas", true);
   
   // (2) Create a virtual globe
   var globe = ogCreateGlobe(ctx);
   
   // (3) Add an image and an elevation layer
   var imgBlueMarble500 = 
   {
      url     : ["http://www.openwebglobe.org/data/img"],
      layer   : "World500",
      service : "i3d"
   };
   
   var imgLandsat_CH = 
   {
      url     : ["http://www.openwebglobe.org/data/img"],
      layer   : "LandsatCH",
      /*transparency : 0.5,*/
      service : "i3d"
   };
   
   var elvSRTM_CH = 
   {
      url     : ["http://www.openwebglobe.org/data/elv"],
      layer   : "SRTM",
      service : "i3d"
   };
         
   ogAddImageLayer(globe, imgBlueMarble500);
   ogAddImageLayer(globe, imgLandsat_CH);
   ogAddElevationLayer(globe, elvSRTM_CH);
   
   // (4) Set the "Render-Callback" function.
   // The callback function will be called everytime a frame is drawn.
   ogSetRenderFunction(ctx, OnRender);
   
   // (5) Set the mouse down function. 
   ogSetMouseDownFunction(ctx, OnMouseDown);
   
   // (6) Set the background color
   ogSetBackgroundColor(ctx, 0.2,0.2,0.7,1);
   
   ogSetKeyDownFunction(ctx, OnKeyDown);
   

   

}
//------------------------------------------------------------------------------
   
</script>

</head>
<body onload="main()" style="padding:0px; margin:0px; overflow:hidden;">
   <div style="text-align: center">
   <canvas id="canvas"></canvas>          
   </div>
</body>
</html>
